<template>
  <div class="box">
    <div class="f1">
      <div class="title">关于我们</div>
      <div class="title_en">ABOUT US</div>
      <div class="icon_bg"></div>
      <div class="container">
        <div class="txtBox">
          <div class="text">
            <div style="text-align: center">
              <span style="font-size: 18px">品牌介绍</span>
            </div>
            <p>
              万达宝贝王集团，隶属于万达集团，创立于2014年，六年时间里荣获19项国内外大奖，2018、2019、2020连续3次打破吉尼斯世界纪录、1800万在册会员，累计接待体验人次超过7亿，体验时间超过10亿小时。每一个数据背后，都代表着我们对消费者的深深关爱，对市场、行业发展方向的清晰判断；对消费者消费需求的深刻洞察。
            </p>
            <div style="text-align: center"><span style="font-size: 18px">三大板块业务介绍</span></div>
            <p :class="{ hide: hide }">
              1、乐园板块精研儿童成长的轨迹，将万达宝贝王乐园打造成为儿童成长的第三空间。按照不同年龄段儿童的需求，分别推出：针对0-3岁低幼儿童及下沉市场的成长乐园启蒙版——宝贝王小小乐园；覆盖0-14岁、兼具游乐和教育双重属性的宝贝王成长乐园两大产品，其中分为S-A-B-C四种细分产品。<br />
              儿童主题成长课程采用线上线下双师教学，寓教于乐，学玩二合一，解决孩子成长的8大核心能力。该课程不仅获得国家版权局知识产权，自推出以来付费会员已超8万组家庭，广受家长好评。<br />
              乐园经营也已由直营转变为直营与加盟并重的模式。截止2020年底加盟门店已经签约超过30家，开业15家。2021年计划签约100家，开业50家，预计到2025年底开业门店将突破800家！<br />
              2、作为中国最早建立IP专业运营公司的企业之一，IP业务涵盖动画内容开发、发行、品牌授权、全案营销等全业务链。拥有海底小纵队、魔法俏佳人、彩虹轻骑队、悟璐璐等多个全球知名IP。超级IP《海底小纵队》已经播出4季，全网累计点击量超过400亿次。2020年重点开拓世界500强企业的合作，分别与中粮粮谷、蒙牛、肯德基、亿滋食品、高露洁签署了IP授权战略合作。<br />
              2021年海底小纵队全新剧集以及大电影将会与各位见面。同时IP业务将开创新的IP整合服务运营模式，发挥万达生态优势，整合内外部优质资源，为头部客户提供全面赋能的整合营销授权服务。<br />
              3、优质教育的普及，事关中华民族伟大复兴，事关亿万家庭幸福。万达宝贝王致力于完成这一历史使命！用博爱心做商业事！<br />
              网络教育业务是宝贝王全新打造的第三大业务板块，立足于中国3亿儿童对优质教育的需求，坚守普惠、严选、开放、智能的四大原则，打造优质儿童教育开放性平台。<br />
              宝贝王APP于2020年末全新上线，平台开设6大学科、42门类，已吸引包括喜马拉雅、Ahaschool、优酷少儿、凯叔讲故事、新东方迈格森等头部机构在内的2000多门课程入驻，满足0-12岁年龄段儿童全方位需要，一站式获得。网络教育板块将与宝贝王乐园形成线上、线下协同的生态化发展。真正实现：儿童成长就在宝贝王！<br />
              万达宝贝王集团秉承着万达精神，持续在中国儿童消费领域深耕前行。乐园、IP、网络教育三大业务板块通过生态化体系相互赋能。
            </p>
            <div :class="{ hide: hide }" style="text-align: center">
              <span style="font-size: 18px">未来展望</span>
            </div>
            <p :class="{ hide: hide }">
              未来，我们会将宝贝王打造成为以健康为先、快乐为上、成长为本的全球领先儿童产业品牌。为中国儿童的成长、为中国儿童产业的成长，不懈前行，永不止步！
            </p>
          </div>
        </div>
        <p @click="hide = !hide" :class="{ showhidebtn: true, on: !hide }">{{ hide ? "点击展开" : "点击闭合" }}</p>
        <img class="octopus" src="../assets/img/h74.png" alt="" />
      </div>
    </div>
    <div class="f2">
      <div class="title">企业大事记</div>
      <div class="title_en">BRAND EVENTS</div>
      <div class="icon_bg"></div>
      <div class="container">
        <div class="left">
          <div>
            <div>
              <img src="../assets/img/about1.jpg" />
            </div>
            <div>
              <span>2020.1.18</span>
              <span>成长新动力，学玩二合一。宝贝王【儿童主题成长课程】全面培养孩子8大能力，全国乐园震撼上线</span>
            </div>
          </div>
          <div>
            <div>
              <img src="../assets/img/about3.jpg" />
            </div>
            <div>
              <span>2019.6.1</span>
              <span>宝贝王集团六一梦想跑跨越200城市，打造21万组家庭的超级盛宴！</span>
            </div>
          </div>
          <div>
            <div>
              <img src="../assets/img/about5.jpg" />
            </div>
            <div>
              <span>2018.9.6</span>
              <span>万达宝贝王“成长的力量——最大的线上碰拳头照片集”活动，以超过11万张的照片数量成功创造吉尼斯世界纪录。</span>
            </div>
          </div>
          <div>
            <div>
              <img src="../assets/img/about7.jpg" />
            </div>
            <div>
              <span>2018.3.2</span>
              <span>“万达宝贝王有限公司”成立集团，更名为“万达宝贝王集团有限公司”</span>
            </div>
          </div>
          <div>
            <div>
              <img src="../assets/img/about7.jpg" />
            </div>
            <div>
              <span>2017.9.20</span>
              <span>“万达儿童娱乐有限公司”正式更名为“万达宝贝王有限公司”</span>
            </div>
          </div>
          <div>
            <div>
              <img src="../assets/img/about10.jpg" />
            </div>
            <div>
              <span>2017.6.1</span>
              <span>在全国101座城市，123家万达广场，同时举办了海底小纵队主题跑活动，10万儿童同时起跑，打破了1项世界纪录。</span>
            </div>
          </div>
          <div>
            <div>
              <img src="../assets/img/about12.jpg" />
            </div>
            <div>
              <span>2016.11.18</span>
              <span>第100家宝贝王乐园在郑州惠济万达广场盛大开业</span>
            </div>
          </div>
          <div>
            <div>
              <img src="../assets/img/about7.jpg" />
            </div>
            <div>
              <span>2014.3.28</span>
              <span>“万达儿童娱乐有限公司”正式成立</span>
            </div>
            <img class="img-bot" src="../assets/img/bottom.png" />
          </div>
        </div>
        <div class="right">
          <div>
            <div>
              <div>
                <span>2019.9.21</span>
                <span>宝贝王杯儿童摄影大赛用34324张儿童摄影作品拼成一句“献礼新中国 爱在宝贝王”，成功打破世界吉尼斯纪录</span>
              </div>
              <div>
                <img src="../assets/img/about2.jpg" />
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <span>2019.9.21</span>
                <span>宝贝王杯儿童摄影大赛用34324张儿童摄影作品拼成一句“献礼新中国 爱在宝贝王”，成功打破世界吉尼斯纪录</span>
              </div>
              <div>
                <img src="../assets/img/about4.jpg" />
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <span>2019.9.21</span>
                <span>宝贝王杯儿童摄影大赛用34324张儿童摄影作品拼成一句“献礼新中国 爱在宝贝王”，成功打破世界吉尼斯纪录</span>
              </div>
              <div>
                <img src="../assets/img/about6.jpg" />
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <span>2019.9.21</span>
                <span>宝贝王杯儿童摄影大赛用34324张儿童摄影作品拼成一句“献礼新中国 爱在宝贝王”，成功打破世界吉尼斯纪录</span>
              </div>
              <div>
                <img src="../assets/img/about8.jpg" />
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <span>2019.9.21</span>
                <span>宝贝王杯儿童摄影大赛用34324张儿童摄影作品拼成一句“献礼新中国 爱在宝贝王”，成功打破世界吉尼斯纪录</span>
              </div>
              <div>
                <img src="../assets/img/about9.jpg" />
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <span>2019.9.21</span>
                <span>宝贝王杯儿童摄影大赛用34324张儿童摄影作品拼成一句“献礼新中国 爱在宝贝王”，成功打破世界吉尼斯纪录</span>
              </div>
              <div>
                <img src="../assets/img/about11.jpg" />
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <span>2019.9.21</span>
                <span>宝贝王杯儿童摄影大赛用34324张儿童摄影作品拼成一句“献礼新中国 爱在宝贝王”，成功打破世界吉尼斯纪录</span>
              </div>
              <div>
                <img src="../assets/img/about13.jpg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="f3"></div>
    <div class="f4"></div>
    <div class="f5"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hide: true,
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-image: url("../assets/img/bg02.png");
  background-size: 1536px 100px;
}
.title {
  font-size: 30px;
  text-align: center;
  line-height: 30px;
  color: #333;
}
.title_en {
  font-size: 16px;
  color: #f0cb7a;
  line-height: 30px;
  text-align: center;
}
.f1 {
  margin-top: 60px;
  .icon_bg {
    margin-bottom: 45px;
    padding-bottom: 20px;
    background: url("../assets/img/icon06.png") no-repeat bottom center;
  }
  .container {
    width: 1170px;
    margin: 0 auto;
    background: url("../assets/img/h72.png") no-repeat left -100px top -150px;
    position: relative;
    background-color: #fff;
    box-shadow: 0px 0px 20px #e0dede;
    .txtBox {
      position: relative;
      padding: 70px 0 130px;
      background: url("../assets/img/h73.png") no-repeat right -160px bottom -235px;
      .text {
        width: 860px;
        overflow: hidden;
        margin: 0 auto;
        > div {
          margin-bottom: 35px;
          font-size: 16px;
          color: #333;
          line-height: 35px;
        }
        > p {
          display: block;
          margin-bottom: 35px;
          font-size: 16px;
          color: #333;
          line-height: 35px;
          text-indent: 2em;
        }
      }
    }
    .octopus {
      width: auto !important;
      height: 204px;
      position: absolute;
      bottom: -30px;
      right: 0;
    }
    .showhidebtn {
      width: 110px;
      height: 35px;
      cursor: pointer;
      padding-right: 20px;
      background: white;
      border: 1px solid #f0cb7a;
      border-radius: 35px;
      background: url("../assets/img/icon26.png") no-repeat right 25px center;
      font-size: 14px;
      color: #f0cb7a;
      line-height: 35px;
      text-align: center;
      position: absolute;
      bottom: 40px;
      left: 50%;
      margin-left: -75px;
      &.on {
        background: url("../assets/img/icon26a.png") no-repeat right 25px center;
      }
    }
  }
  .hide {
    display: none !important;
  }
}
.f2 {
  margin-top: 50px;
  .icon_bg {
    margin-bottom: 45px;
    padding-bottom: 20px;
    background: url("../assets/img/icon13.png") no-repeat bottom center;
  }
  .container {
    width: 1170px;
    margin: 0 auto;
    display: flex;
    margin-bottom: 80px;
    max-height: 1730px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 9px;
      background-color: #e1e1e1;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #f0cb7a;
    }
    .left {
      width: 540px;
      > div {
        width: 540;
        height: 300px;
        box-sizing: border-box;
        padding: 25px 15px;
        margin-bottom: 150px;
        display: flex;
        background-color: #f2e9ea;
        border-radius: 10px;
        &:last-child {
          position: relative;
          img.img-bot {
            position: absolute;
            right: -66px;
            top: 0;
          }
        }
        > div:first-child {
          width: 325px;
          height: 250px;
          overflow: hidden;
          > img {
            width: 325px;
            height: 250px;
            transition: all 0.5s;
            &:hover {
              transform: scale(1.1);
            }
          }
        }
        > div:nth-child(2) {
          > span {
            &:first-child {
              display: block;
              width: 160px;
              font-size: 26px;
              color: #ff7686;
              line-height: 67px;
              text-align: left;
              padding-left: 22px;
              background: url("../assets/img/icon30.png") no-repeat left center;
              background-size: 84px 67px;
            }
            &:last-child {
              width: 160px;
              margin: 0 auto;
              font-size: 14px;
              color: #333;
              line-height: 35px;
              text-align: left;
              overflow: hidden;
              -webkit-text-overflow: ellipsis;
              -moz-text-overflow: ellipsis;
              -ms-text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              display: -webkit-box;
              display: -moz-box;
              display: -ms-box;
              display: -o-box;
              display: box;
              -webkit-line-clamp: 5;
              -moz-line-clamp: 5;
              -ms-line-clamp: 5;
              -o-line-clamp: 5;
              line-clamp: 5;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              -ms-box-orient: vertical;
              -o-box-orient: vertical;
              box-orient: vertical;
            }
          }
        }
      }
    }
    .right {
      width: 620px;
      min-height: 500px;
      > div {
        width: 620px;
        height: 450px;
        box-sizing: border-box;
        padding: 150px 0 0 80px;
        background: url("../assets/img/icon40.png") no-repeat top 50px left 27px;
        background-repeat: repeat-y;
        > div {
          background-color: #f2e9ea;
          width: 540px;
          height: 300px;
          display: flex;
          border-radius: 10px;
          box-sizing: border-box;
          padding: 25px 15px;
          > div {
            &:first-child {
              > span {
                &:first-child {
                  display: block;
                  width: 160px;
                  font-size: 26px;
                  color: #ff7686;
                  line-height: 67px;
                  text-align: left;
                  padding-left: 22px;
                  background: url("../assets/img/icon30.png") no-repeat left center;
                  background-size: 84px 67px;
                }
                &:last-child {
                  width: 160px;
                  margin: 0 auto;
                  font-size: 14px;
                  color: #333;
                  line-height: 35px;
                  text-align: left;
                  overflow: hidden;
                  -webkit-text-overflow: ellipsis;
                  -moz-text-overflow: ellipsis;
                  -ms-text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  display: -moz-box;
                  display: -ms-box;
                  display: -o-box;
                  display: box;
                  -webkit-line-clamp: 5;
                  -moz-line-clamp: 5;
                  -ms-line-clamp: 5;
                  -o-line-clamp: 5;
                  line-clamp: 5;
                  -webkit-box-orient: vertical;
                  -moz-box-orient: vertical;
                  -ms-box-orient: vertical;
                  -o-box-orient: vertical;
                  box-orient: vertical;
                }
              }
            }
            &:last-child {
              width: 325px;
              height: 250px;
              overflow: hidden;
              > img {
                width: 325px;
                height: 250px;
                transition: all 0.5s;
                &:hover {
                  transform: scale(1.1);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
